
<template>
    <el-steps
      style="max-width: 2000px"
      :space="800"
      :active="active"
      finish-status="success"
      :align-center=true
    >
      <el-step title="填写邮箱" />
      <el-step title="输入账号密码" />
      <el-step title="注册成功" />
    </el-steps>
    <div v-if="active === 0" style="margin-top: 200px">
        <EmailSend ref="emailSendRef" />
    </div>

  <div v-else-if="active === 1" style="margin-top: 200px">
    <RegisterForm ref="formRef" @verified="onVerified" />
  </div>
  <div v-else-if="active === 2" style="margin-top: 100px">
    <RegisterSuccess />
  </div>
    <div class="bottom-btn-container" v-if="active === 0">
      <el-button @click="next">Next step</el-button>
    </div>
    
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import EmailSend from '@/components/auth/EmailSend.vue'
import RegisterForm from '@/components/auth/RegisterForm.vue'
import RegisterSuccess from '@/components/auth/RegisterSuccess.vue'
import router from '@/router'
const active = ref(0)
const emailSendRef = ref()
const formRef = ref()
const next = async () => {
  if (active.value === 0) {
    // 先判断 ref 是否有值
    if (emailSendRef.value && typeof emailSendRef.value.verify === 'function') {
      const valid = await emailSendRef.value.verify()
      console.log('验证结果:', valid)
      if (valid) {
        active.value++
      }
    } else {
      console.error('EmailSend 组件未正确挂载或未暴露 verify 方法')
    }
    return
  }

  if (active.value === 1) {
    if (formRef.value && typeof formRef.value.verify === 'function') {
      const valid = await formRef.value.verify()
      console.log('验证结果:', valid)
      if (valid) {
        active.value++
      }
    } else {
      console.error('RegisterForm 组件未正确挂载或未暴露 verify 方法')
    }
    return
  }

  // 其它情况：循环回到第一步
  if (active.value < 2) {
    active.value++
  } else {
    router.push('/login')
  }
}

const onVerified = () => {
  active.value++
}



</script>

<style scoped>
.bottom-btn-container {
  position: fixed;
  left: 0;
  bottom: 25%; /* 距离底部距离，可调整 */
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
}
</style>